<template>
  <view class="vehicle-add">
    <view class="return-box" @click="goBack">
      <up-icon name="arrow-left"></up-icon>
    </view>
    <view class="return-title" >
      {{btnText == "确认"?"车辆绑定新增" : "车辆绑定修改"}}
    </view>
    <view class="vehicle">
      <h4 class="title">车辆详情</h4>
      <up-cell-group :border="false" v-if="btnText == '确认'">
        <up-cell title="车型">
          <template #value>
            <up-input
              inputAlign="right"
              placeholderStyle="color: #606266;"
              placeholder="请输入车型"
              border="none"
              v-model="model"
            ></up-input>
          </template>
        </up-cell>
        <up-cell title="车牌">
          <template #value>
            <up-input
              inputAlign="right"
              placeholderStyle="color: #606266;"
              placeholder="请输入车牌"
              border="none"
              v-model="license"
            ></up-input>
          </template>
        </up-cell>
        <up-cell title="颜色">
          <template #value>
            <up-input
              inputAlign="right"
              placeholderStyle="color: #606266;"
              placeholder="请输入颜色"
              border="none"
              v-model="colour"
            ></up-input>
          </template>
        </up-cell>
        <up-cell title="联系人">
          <template #value>
            <up-input
              inputAlign="right"
              placeholderStyle="color: #606266;"
              placeholder="请输入联系人"
              border="none"
              v-model="contacts"
            ></up-input>
          </template>
        </up-cell>
        <up-cell title="联系电话">
          <template #value>
            <up-input
              inputAlign="right"
              placeholderStyle="color: #606266;"
              placeholder="请输入联系电话"
              border="none"
              v-model="phone"
            ></up-input>
          </template>
        </up-cell>
      </up-cell-group>
      <up-cell-group :border="false" v-else>
        <up-cell title="车型">
          <template #value>
            <up-input
              inputAlign="right"
              placeholderStyle="color: #606266;"
              placeholder="请输入车型"
              border="none"
              v-model="model"
            ></up-input>
          </template>
        </up-cell>
        <up-cell title="车牌">
          <template #value>
            <up-input
              inputAlign="right"
              placeholderStyle="color: #606266;"
              placeholder="请输入车牌"
              border="none"
              v-model="license"
            ></up-input>
          </template>
        </up-cell>
        <up-cell title="颜色">
          <template #value>
            <up-input
              inputAlign="right"
              placeholderStyle="color: #606266;"
              placeholder="请输入颜色"
              border="none"
              v-model="colour"
            ></up-input>
          </template>
        </up-cell>
      </up-cell-group>
    </view>
    <up-modal
      :show="modalShow"
      title="操作确认"
      content="是否修改该车辆信息？"
      :showCancelButton="true"
      @confirm="saveOrUpdateCarBind"
      @cancel="modalShow = false"
    ></up-modal>
    <view class="room-btn">
      <button @click="addVehicle" class="btn" form-type="submit">
        {{ btnText }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { customNav } from "@/utils/customNav";
import { saveOrUpdateCarBindApi } from "@/package_kuafu_apartment/pages/api/vehicle";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
const model = ref("");
const license = ref("");
const colour = ref("");
const contacts = ref("");
const phone = ref("");
const identifier = ref("");
const btnText = ref("");
const modalShow = ref(false);
async function saveOrUpdateCarBind() {
  let vehicleData = {};
  if (btnText.value == "确认") {
    vehicleData = {
      carColour: colour.value,
      carNumber: license.value,
      carType: model.value,
      name: contacts.value,
      phone: phone.value,
    };
  } else {
    vehicleData = {
      carColour: colour.value,
      carNumber: license.value,
      carType: model.value,
      name: contacts.value,
      phone: phone.value,
      id: identifier.value,
    };
  }
  let res = await saveOrUpdateCarBindApi(vehicleData);
  console.log(res);
  if (res.code == 200) {
    uni.navigateBack({
      delta: 1,
    });
  } else {
    uni.showToast({
      icon: "none",
      title: res.msg,
      duration: 2000,
    });
  }
}
function addVehicle() {
  if (model.value == "") {
    uni.showToast({
      icon: "none",
      title: "请输入车型",
      duration: 2000,
    });
  } else if (license.value == "") {
    uni.showToast({
      icon: "none",
      title: "请输入车牌",
      duration: 2000,
    });
  } else if (colour.value == "") {
    uni.showToast({
      icon: "none",
      title: "请输入颜色",
      duration: 2000,
    });
  } else if (contacts.value == "") {
    uni.showToast({
      icon: "none",
      title: "请输入联系人",
      duration: 2000,
    });
  } else if (phone.value == "") {
    uni.showToast({
      icon: "none",
      title: "请输入联系电话",
      duration: 2000,
    });
  } else {
    if (btnText.value == "确认") {
      saveOrUpdateCarBind();
    } else {
      modalShow.value = true;
    }
  }
}
function goBack() {
  uni.navigateBack({
    delta: 1,
  });
}
onLoad((option) => {
  console.log(option);
  if (option.type == "新增") {
    btnText.value = "确认";
  } else {
    btnText.value = "修改";
    let item = JSON.parse(option.item);
    colour.value = item.carColour;
    license.value = item.carNumber;
    model.value = item.carType;
    contacts.value = item.name;
    phone.value = item.phone;
    identifier.value = item.id;
  }
});
</script>

<style lang="less" scoped>
@import url(./style/vehicle-add.less);
</style>